<!-- 用户类型下拉框 -->
<template>
  <a-select
    show-search
    optionFilterProp="label"
    :options="data"
    allow-clear
    :value="value"
    :placeholder="placeholder"
    @update:value="updateValue"
    @blur="onBlur"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { SelectProps } from 'ant-design-vue/es';

  const emit = defineEmits<{
    (e: 'update:value', value: string): void;
    (e: 'blur'): void;
  }>();

  withDefaults(
    defineProps<{
      value?: string;
      placeholder?: string;
    }>(),
    {
      value: undefined,
      placeholder: '请选择用户类型'
    }
  );

  // 字典数据
  const data = ref<SelectProps['options']>([
    {
      value: 'HORIZONTAL',
      label: '横版'
    },
    {
      value: 'VERTICAL',
      label: '竖版'
    }
  ]);

  /* 更新选中数据 */
  const updateValue = (value: string) => {
    emit('update:value', value);
  };

  /* 获取字典数据 */
  // listDictionaryData({
  //   dictCode: 'sex'
  // })
  //   .then((list) => {
  //     data.value = list.map((d) => {
  //       return {
  //         value: d.dictDataCode,
  //         label: d.dictDataName
  //       };
  //     });
  //   })
  //   .catch((e) => {
  //     message.error(e.message);
  //   });

  /* 失去焦点 */
  const onBlur = () => {
    emit('blur');
  };
</script>
